vue车牌输入组件使用方法详解 |
您所在的位置：网站首页 › vue 重写组件方法 › vue车牌输入组件使用方法详解 |
vue车牌输入组件使用方法详解
|
一个简单的车牌输入组件（vue），供大家参考，具体内容如下 效果图：
vue代码： {{plateInput.input.value.p1}} {{plateInput.input.value.p2}} {{plateInput.input.value.p3}} {{plateInput.input.value.p4}} {{plateInput.input.value.p5}} {{plateInput.input.value.p6}} {{plateInput.input.value.p7}} {{plateInput.input.value.p8}} 取消 确认 {{i}} 删 {{i}} 删 .enTer{ .plateInput{ padding:0 20rpx; display: flex; justify-content: space-around; .item{ width: 60rpx; height: 75rpx; border:1rpx solid #FF5100; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; font-size: 28rpx; } .active{ border-color: #3399ff; } } .bords{ position: fixed; bottom: 0; left: 0; z-index: 999; .bor{ position: relative; .btns{ width: 100%; height: 70rpx; background: #fff; border-top:1rpx solid rgba(0,0,0,0.05); position: absolute; display: flex; justify-content: space-between; align-items: center; top: -70rpx; left: 0; button{ margin:0; } } } // 键盘 .keyboard{ position:fixed; bottom:0; left:0; background-color:#ced2d9; width:100%; height:360rpx; margin:0; padding:0; font-size:36rpx; z-index:1; } .keyboard li { list-style:none; border-radius:10rpx; } .keyboard li { float:left; background-color:#fefefe; margin-left:15rpx; margin-top:15rpx; } .num{ color: rgba(0,0,0,0.15); } .province{ position: relative; } .provinces{ position: relative; } .province li{ width:calc((100% - 15rpx * 11) / 10); height:calc((100% - 15rpx * 5) / 4); display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; justify-content: center; -webkit-justify-content: center; } .province li.delete{ width:calc((100% - 15rpx * 11) / 10 * 2 + 15rpx); } .province li.deletes{ width:calc((100% - 15rpx * 11) / 10 * 2 + 90rpx); } .disabled{ color: rgba(0,0,0,0.15); } } }event事件： export let life = { created () { // this.currentPlate = this.plateNumber // console.log(this.plateNumber) // this.EnterPlateNumber.input.firstWord = this.plateNumber.slice(0,1) // this.EnterPlateNumber.input.secondWord = this.plateNumber.slice(1,2) // this.EnterPlateNumber.input.lastWords = this.plateNumber.slice(2,9) } } export let event = { clickInput (type) { this.methods("clickInput",type) }, clickKeyboard (val) { if (this.plateInput.input.type === "p2" && parseInt(val) >= 0 && parseInt(val) =0){ this.plateInput.input.value["p"+nu] = undefined } let type = this.plateInput.input.type.split("p")[1] if (type !== "1") { this.plateInput.input.type = "p" + (parseInt(type) - 1) } } setPlateNumber () { if (this.plateInput.input.plateNumber) { this.plateNumber1 = this.plateInput.input.plateNumber }else{ this.plateNumber1 = undefined } } setDirectIssuedPlateNumber () { if (this.plateInput.input.plateNumber) { this.plateNumber1 = this.plateInput.input.plateNumber }else{ this.plateNumber1 = undefined } } }model数据： export let props = ["name","plateNumber","noRightPart"] export let model = { currentPlate:undefined, plateInput:{ input:{ value:{ p1:"桂", p2:"B", p3:2, p4:2, p5:2, p6:2, p7:2, p8:0 }, type:"p1", dialogVisible:false } }, Keyboard: { province: ["京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "沪", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "桂", "琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青","宁","新","台","港","澳","使","领","警","学"], number: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C","D", "E", "F", "G","H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "学", "港", "澳"] }, } export let computed = { plateNumber1 : { get () { return this.plateNumber||"" }, set (val) { this.$emit("update:plateNumber", val) } } }因为这里用了独家的框架，所以根据需要把相应的生命周期函数放到正常的vue项目的位置，把event就写成正常的函数，methods就是i正常的methods里面的方法，model就是data里return的数据。 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持云海天教程。 |
【本文地址】